<template>
  <div class="export">
    <div>
      <action-menu
        :items="menuItems"
        @upload="importDialog = true"
        @download="exportDialog = true"
      />
      <v-dialog v-model="importDialog" width="800">
        <document-upload-form
          :upload-document="uploadDocument"
          :formats="getImportFormat"
          @close="importDialog = false"
        />
      </v-dialog>
      <v-dialog v-model="exportDialog" width="800">
        <document-export-form
          :export-document="exportDocument"
          :formats="getExportFormat"
          :startTime="sendDate1"
          :endTime="sendDate2"
          @close="exportDialog = false"
        />
      </v-dialog>
    </div>
    <v-row class="dateR">
      <v-menu
        ref="menu1"
        v-model="menu1"
        :close-on-content-click="false"
        transition="scale-transition"
        offset-y
        max-width="290px"
        min-width="auto"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-text-field
            v-model="dateFormatted"
            placeholder="选择开始导出日期"
            label="选择开始日期"
            persistent-hint
            hint="选择开始日期从当日查询"
            prepend-icon="mdi-calendar"
            v-bind="attrs"
            @blur="date = parseDate(dateFormatted)"
            v-on="on"
          ></v-text-field>
        </template>
        <v-date-picker
          v-model="date1"
          no-title
          @input="menu1 = false"
          locale="zh-cn"
        ></v-date-picker>
      </v-menu>

      <v-menu
        v-model="menu2"
        :close-on-content-click="false"
        transition="scale-transition"
        offset-y
        max-width="290px"
        min-width="auto"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-text-field
            v-model="computedDateFormatted"
            placeholder="选择结束导出日期"
            label="选择结束日期"
            :hint="danger"
            persistent-hint
            prepend-icon="mdi-calendar"
            readonly
            v-bind="attrs"
            v-on="on"
          ></v-text-field>
        </template>
        <v-date-picker
          v-model="date2"
          no-title
          @input="menu2 = false"
          locale="zh-cn"
        ></v-date-picker>
      </v-menu>
    </v-row>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import ActionMenu from '@/components/molecules/ActionMenu'
import DocumentUploadForm from '@/components/organisms/documents/DocumentUploadForm'
import DocumentExportForm from '@/components/organisms/documents/DocumentExportForm'

export default {
  components: {
    ActionMenu,
    DocumentUploadForm,
    DocumentExportForm
  },

  data() {
    return {
      importDialog: false,
      exportDialog: false,
      menuItems: [
        { title: 'Import Dataset', icon: 'mdi-upload', event: 'upload' },
        { title: 'Export Dataset', icon: 'mdi-download', event: 'download' }
      ],
      dateFormatted: '',
      computedDateFormatted: '',
      date1: '',
      date2: '',
      danger: '',
      menu1: false,
      menu2: false,
      select: '',
      sendDate1: '',
      sendDate2: ''
    }
  },

  computed: {
    ...mapGetters('projects', ['getImportFormat', 'getExportFormat'])
  },

  watch: {
    date1: {
      handler(val) {
        this.sendDate1 = val
        this.dateFormatted = this.formatDate(val)
      },
      immediate: true
    },
    date2: {
      handler(val, old) {
        this.sendDate2 = val
        this.date2 = val
        this.computedDateFormatted = this.formatDate(val)
      }
    }
  },

  created() {
    this.setCurrentProject(this.$route.params.id)
  },

  methods: {
    ...mapActions('documents', ['uploadDocument', 'exportDocument']),
    ...mapActions('projects', ['setCurrentProject']),
    formatDate(date) {
      if (!date) {
        return null
      }
      const [year, month, day] = date.split('-')
      return `${month}/${day}/${year}`
    },
    parseDate(date) {
      if (!date) {
        return null
      }
      const [month, day, year] = date.split('/')
      return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
    }
  }
}
</script>
<style scoped>
.export {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.dateR {
  margin: 0 10px;
}
</style>
